<template>
  <div class="leftWrap" :style="{ width: isShowLeft ? containerWidth + 'px' : '0px' }">
    <div
      class="transition-all duration-[300] overflow-y-auto leftHeiht relative"
      v-show="isShowLeft"
      :style="{ width: isShowLeft ? containerWidth + 'px' : 0 }"
    >
      <select-category-tree
        :type="type"
        @node-click="handleNodeClick"
      ></select-category-tree>
    </div>
    <div class="isShowLeft text-[#fff]" @click="showLeftF">
      <svg-icon
        class="ml-[1px] mt-[12px]"
        icon-class="ArrowLeft"
        v-show="isShowLeft"
      ></svg-icon>
      <svg-icon
        class="ml-[1px] mt-[12px]"
        icon-class="ArrowRight"
        v-show="!isShowLeft"
      ></svg-icon>
    </div>
    <div v-if="isShowLeft" class="resize" @mousedown="mouseDown"></div>
  </div>
</template>
<script setup>
import { nextTick, ref, reactive, onMounted, toRefs, computed } from "vue";
import SelectCategoryTree from "@/components/SelectCategoryTree";
import { throttle } from "@/utils/dom";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  show: {
    type: Boolean,
    default: true,
  },
});

const { type } = toRefs(props);

const emit = defineEmits(["node-click", "toggle"]);

const data = reactive({
  startX: 280,
  containerWidth: 280,
  isResizing: false,
  isShowLeft: false,
});

const { isShowLeft, startX, containerWidth, isResizing } = toRefs(data);

const showLeftF = () => {
  isShowLeft.value = !isShowLeft.value;
  emit("toggle", isShowLeft.value, containerWidth.value);
};

const handleNodeClick = (data, type) => {
  if (type == "1") {
    if (data.child_ids?.length) {
      let ids = [];
      ids.push(data.id);
      ids.push(...data.child_ids);
      emit("node-click", {
        type: 1,
        spu_category: ids,
      });
    } else {
      emit("node-click", {
        type: 1,
        spu_category: data.id,
      });
    }
  } else {
    let all_child_user = [];
    if (data.user_id) {
      all_child_user.push(data.user_id);
    }
    if (data.all_child_user?.length) {
      all_child_user.push(...data.all_child_user);
    }
    emit("node-click", {
      type: 2,
      all_child_user: all_child_user,
    });
  }
};

const mouseMove = (event) => {
  if (isResizing.value) {
    const newWidth = containerWidth.value + event.clientX - startX.value;
    containerWidth.value = Math.max(100, newWidth); // 设置最小宽度
    startX.value = event.clientX;
    emit("toggle", isShowLeft.value, containerWidth.value);
  }
};
// 鼠标按下事件
const mouseDown = (event) => {
  isResizing.value = true;
  startX.value = event.clientX;
  document.addEventListener("mousemove", mouseMove);
  document.addEventListener("mouseup", mouseUp);
};
// 鼠标释放事件
const mouseUp = () => {
  isResizing.value = false;
  document.removeEventListener("mousemove", mouseMove);
  document.removeEventListener("mouseup", mouseUp);
};
// 鼠标释放节流事件
const handleMoveThrottled = throttle(mouseUp, 300);

onMounted(() => {
  isShowLeft.value = props.show;
  document.addEventListener("mouseup", handleMoveThrottled);
});
// 组件卸载时移除监听
onUnmounted(() => {
  document.removeEventListener("mouseup", handleMoveThrottled);
});
</script>
<style>
.leftWrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* box-shadow: 1px 0px 0px 0px #eff3fe; */
}

.resize {
  width: 5px;
  background-color: var(--base-small-bg-color);
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
}

.isShowLeft {
  border: 1px solid var(--base-small-bg-color);
  position: absolute;
  width: 20px;
  height: 40px;
  right: -10px;
  top: calc(50% - 20px);
  line-height: 40px;
  text-align: center;
  z-index: 1002;
  color: #ffffff;
  background-color: #3487ff;
  box-shadow: 0 0 10px var(--base-small-bg-color);
  border-radius: 4px;
  cursor: pointer;
  z-index: 99;
}
</style>
